import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
import SagaContainer, { SagaContext } from './SagaContainer';
import { createReducer, createReducerGroupByParentKey } from './reducers';

function AppT() {
  const { state, dispatch } = useContext(SagaContext);
  return (
    <div>
      {JSON.stringify(state)}
      <button
        onClick={() =>
          dispatch({ type: 'subList/add', payload: { x: 1 }, parentId: 1 })
        }
      >
        Decrement
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'subList/update',
            payload: {
              y: 22,
            },
          })
        }
      >
        Increment
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'subList/replace',
            parentId: 1,
            payload: {
              x: 11,
            },
          })
        }
      >
        Increment
      </button>
    </div>
  );
}
function App() {
  const { state, dispatch } = useContext(SagaContext);
  // const [state, dispatch] = [{list:1}];
  return (
    <div className="App">
      <h2>Using Redux-saga with hooks **EXPERIMENTAL**</h2>
      <hr />
      <h2>Current list : {JSON.stringify(state.list)}</h2>
      <SagaContainer
        reducers={{
          ...createReducerGroupByParentKey('subList'),
        }}
        initState={{ subList: {} }}
      >
        <AppT />
      </SagaContainer>

      <button
        onClick={() =>
          dispatch({ type: 'list/add', payload: { x: 1 }, parentId: 1 })
        }
      >
        Decrement
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'list/update',
            payload: {
              y: 22,
            },
          })
        }
      >
        Increment
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'list/replace',
            parentId: 1,
            payload: {
              x: 11,
            },
          })
        }
      >
        Increment
      </button>
      <hr />
    </div>
  );
}

function A() {
  return (
    <SagaContainer
      // context={SagaContext}
      reducers={{
        ...createReducer('list'),
      }}
      initState={{ list: {} }}
    >
      <App />
    </SagaContainer>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<A />, rootElement);
